﻿@model FileUploadModel



<div id="uploader_@Model.Id" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist_@Model.Id" class="uploader-list">
    </div>
    <div class="btns">
        <div id="picker_@Model.Id" class="picker Btnsty_peyton">选择文件</div>
        <input id="ctlBtn_@Model.Id" class="btn-upload" type="button" style="vertical-align:middle;border-radius:3px;border:none;margin:4px;height:29px;display:@(Model.AutoUpload?" none":"inline-block");" value="开始上传" />
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var $fileInputScripts = $("#webuploaderScripts");
        if ($fileInputScripts == undefined || $fileInputScripts.length == 0) {
            $("head").addStyle("/js/ueditor/third-party/webuploader/webuploader.css");
            $("head").addScript("webuploaderScripts", "/js/ueditor/third-party/webuploader/webuploader.js");
        }
        var $picker = $('#picker_@(Model.Id)');
        var $list = $("#thelist_@Model.Id");
        var state = 'pending';
        var $btnUpload = $("#ctlBtn_@Model.Id");
        var hasUploadDetail = @Model.HasUploadDetail.ToString().ToLower();
        var $hdControll = $("#@Model.ControlId");
        var isMultiple = @Model.ShowMultiple.ToString().ToLower();
        var size = 0;
        var title = "";
        var hdVal = "";
        var fileType = "";

        //===============初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: @Model.AutoUpload.ToString().ToLower(),
            // swf文件路径
            swf: '/js/ueditor/third-party/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/SysComponent/Controll/UploadFiles?action=@((int)Model.ActionType)',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker_@(Model.Id)',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            fileNumLimit: '@(Model.ShowMultiple?10:1)',  //文件总数量只能选择10个 
            //限制文件大小
            fileSingleSizeLimit: @ConfigManager.MaxFileLength,   //5M
            //限制文件大小
            //accept: {
            //    //title: 'rar',
            //    extensions: 'rar,zip,gzip',
            //    //mimeTypes: 'rar/*'
            //}
        });


        if ($("input[name='rbType']")) {
            $("input[name='rbType']").click(function () {
                uploader.refresh();
            });
        }


        $btnUpload.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                size = 0;
                if ($list.find("div.item").length <= 0) {
                    $.modalMsg("请选择文件");
                }
                $list.html('');
                title = "";
                hdVal = "";
                fileType = "";
                uploader.upload();
            }
        });

        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            var localFIle = '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                //'<p class="state">等待上传...</p>' +
                '</div>';
                if (isMultiple) {
                    $list.append(localFIle);
                }
                else {
                    $list.html(localFIle);
                }
            });

        // 文件上传过程中创建进度条实时显示。
        //uploader.on('uploadProgress', function (file, percentage) {
        //    var $li = $('#' + file.id),
        //        $percent = $li.find('.progress .progress-bar');

        //    // 避免重复创建
        //    if (!$percent.length) {
        //        $percent = $('<div class="progress progress-striped active">' +
        //            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
        //            '</div>' +
        //            '</div>').appendTo($li).find('.progress-bar');
        //    }

        //    $li.find('p.state').text('上传中');

        //    $percent.css('width', percentage * 100 + '%');
        //});


        uploader.on('uploadSuccess', function (file, result) {
            //console.log(file);
            if (result.state == "success") {
                
                if (@((int)Model.ActionType) == @((int)UpLoadAction.cover)) {
                    $list.append("<img src='" + result.data + "' width='80' style='margin-bottom:5px;' /> ");
                }
                else {
                    if (hasUploadDetail) {
                        if (hdVal.length > 0) {
                            title += ",";
                            fileType += ",";
                        }
                        size += file.size;
                        title += file.name.split('.')[0];
                        fileType += file.ext;
                        
                        $("#" + $hdControll.attr("sizeid")).val(size);
                        $("#Title").val(title);
                        $("#Keyword").val(title);
                        $("#ResourceType").val(fileType);
                    }
                    $list.append("<div class='uploadifyQueue'><div class='uploadifyQueueItem completed'> <span class='fileName'>" + file.name + " (" + (file.size / 1024).toFixed(2) + "KB)</span><span class='percentage'> - 上传成功</span> </div></div> ");
                }

                if (hdVal.length > 0) {
                    hdVal += ",";
                }
                hdVal += result.data;
                $hdControll.val(hdVal);

            }
            else { 
                $.modalMsg(result.message);
            }
        });

        uploader.on('uploadError', function (file) {
            $.modalMsg("上传失败");
        });

        uploader.on('uploadComplete', function (file) {
            //$('#' + file.id).find('.progress').fadeOut();
        });

    });
</script>





